import store from '../../store/index';
import handAccountCanvas from '@/assets/utils/core';
let toJsonAttr = [ 'isEdit', 'isMove', 'isMatting', 'fontFamilySrc', 'selectable', '_index', 'elType' ];
import { Toast } from 'vant';
const deleteIcon = require('../images/common/delete.png'); // 删除图标
// import deleteIcon from './images/common/delete.png'; // 删除图标
const rotateIcon = require('../images/common/rotate.png'); // 旋转图标
const zuoyouIcon = require('../images/common/zuoyou.png'); // 左右拉伸图标
const scaleIcon = require('../images/common/scale.png'); // 等比缩放图标
const copyIcon = require('../images/common/copy.png'); // 等比缩放图标
const mirrorIcon = require('../images/common/jingxiang.png'); // 等比缩放图标
const changImageIcon = require('../images/common/moban_change.png'); // 更换图标
const changTextIcon = require('../images/common/moban_edit1.png'); // 换字图标
const changCarIcon = require('../images/common/moban_changeCar.png'); // 换车图标
const changCarTextIcon = require('../images/common/moban_car_text.png'); // 换车牌

// 自定义画布元素控件样式
export function diyCustomControlRender() {
  // 其旋转控制点和主体之间一般没有那条控制线，这里我们对它进行隐藏。
  fabric.Object.prototype.controls.mtr.withConnection = false;
  // 将控制线默认的浅蓝色改为#AAB9E3
  fabric.Object.prototype.borderColor = '#AAB9E3';
  // 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
  fabric.Object.prototype.cornerStyle = "circle";
  // 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
  fabric.Object.prototype.padding = 0;
  // 修改控制点的填充色为白色
  fabric.Object.prototype.cornerColor = "white";
  // 修改控制点的大小为10px
  fabric.Object.prototype.cornerSize = 10;
  // 设置控制点不透明，即可以盖住其下的控制线
  fabric.Object.prototype.transparentCorners = false;
  // 修改控制点的边框颜色为`gray`灰色
  fabric.Object.prototype.cornerStrokeColor = "gray";
  // 单独修改旋转控制点距离主体的纵向距离为-20px
  fabric.Object.prototype.controls.mtr.offsetY = -20;

  // 创建删除图片元素========================================delete
  let deleteImg = document.createElement('img')
  deleteImg.src = deleteIcon

  // 渲染图标
  const renderIcon = icon => {
    return function (ctx, left, top, styleOverride, fabricObject) {
      const size = this.cornerSize;
      ctx.save();
      ctx.translate(left, top);
      ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
      ctx.drawImage(icon, -size / 2, -size / 2, size, size);
      ctx.restore();
    }
  }

  // 删除控件的事件
  const deleteObject = (eventData, transform) => {
    const target = transform.target;
    const canvas = target.canvas;
    canvas.remove(target);
    canvas.requestRenderAll();
  }

  // 删除按钮控件-绘制
  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: deleteObject,
    render: renderIcon(deleteImg),
    cornerSize: 26
  })

  // 创建克隆图片元素==================================================clone
  let cloneImg = document.createElement('img')
  cloneImg.src = copyIcon;

  // 克隆对象
  const cloneObject = (eventData, transform) => {
    const target = transform.target
    const canvas = target.canvas
    target.clone(function(cloned) {
      cloned.left += 20;
      cloned.top += 20;
      if (cloned.type === 'image'){
        cloned['setControlVisible']('ml',false) // 中左
        cloned['setControlVisible']('mb',false) // 中下
        cloned['setControlVisible']('mr',false) // 中右
        cloned['setControlVisible']('mt',false) // 中上
        cloned['setControlVisible']('tl',false) // 左上角
        cloned['setControlVisible']('bl',false) // 左上角
      } else if (cloned.type === 'textbox') {
        cloned['setControlVisible']('ml',false) // 中左
        cloned['setControlVisible']('mb',false) // 中下
        cloned['setControlVisible']('mr',false) // 中右
        cloned['setControlVisible']('mt',false) // 中上
        cloned['setControlVisible']('tl',false) // 左上角
        cloned['setControlVisible']('bl',false) // 左上角
        // cloned['setControlVisible']('mtr', false) // 中上旋转
        cloned.editable = false;
      } else if (cloned.type === 'group') {
        cloned['setControlVisible']('ml',false) // 中左
        cloned['setControlVisible']('mb',false) // 中下
        cloned['setControlVisible']('mr',false) // 中右
        cloned['setControlVisible']('mt',false) // 中上
        cloned['setControlVisible']('tl',false) // 左上角
        cloned['setControlVisible']('bl',false) // 左上角
      }
      cloned.transparentCorners = false; // 角填充色不透明
      canvas.add(cloned);
      canvas.setActiveObject(cloned);
    });
  }

  // 克隆按钮控件
  fabric.Object.prototype.controls.clone = new fabric.Control({
    x: -0.5,
    y: 0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: cloneObject,
    render: renderIcon(cloneImg),
    cornerSize: 26
  })

  // 创建旋转图片元素==================================================mtr
  let rotateImg = document.createElement('img')
  rotateImg.src = rotateIcon;

  // 旋转按钮控件
  fabric.Object.prototype.controls.mtr = new fabric.Control({
    x: 0,
    y: -0.5,
    offsetY: -20,
    cursorStyle: 'pointer',
    actionName: "rotate",
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
    render: renderIcon(rotateImg),
    cornerSize: 26
  });

  // 创建旋转图片元素==================================================br
  let scaleImg = document.createElement('img')
  scaleImg.src = scaleIcon;

  // 缩放按钮控件
  fabric.Object.prototype.controls.br = new fabric.Control({
    x: 0.5,
    y: 0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    actionName: "scaling",
    actionHandler: fabric.controlsUtils.scalingEqually,
    render: renderIcon(scaleImg),
    cornerSize: 26
  });

  // 创建镜像图片元素==================================================br
  let mirrorImg = document.createElement('img')
  mirrorImg.src = mirrorIcon;

  // 镜像控件的事件
  const mirrorObject = (eventData, transform) => {
    const target = transform.target;
    const canvas = target.canvas;
    if (target.flipX) {
      target.flipX = false;
    } else {
      target.flipX = true;
    }
    canvas.requestRenderAll();
  }

  // 镜像按钮控件
  fabric.Object.prototype.controls.mirror = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: mirrorObject,
    render: renderIcon(mirrorImg),
    cornerSize: 26
  });

  // 镜像按钮控件
  // fabric.Object.prototype.controls.mirror = new fabric.Control({
  //   x: 0.5,
  //   y: 0.5,
  //   offsetY: 0,
  //   offsetX: 0,
  //   cursorStyle: 'pointer',
  //   mouseUpHandler: mirrorObject,
  //   render: renderIcon(mirrorImg),
  //   cornerSize: 26
  // });

  // 图片设置背景

  // 创建左右宽度图片元素==================================================br
  let zuoyouImg = document.createElement('img');
  zuoyouImg.src = zuoyouIcon;

  const changeTextboxWidth = (eventData, transform) => {
    const target = transform.target;
    if (target && target.colorType === 'gradient') {
      handAccountCanvas.updateTextBox({
        type: 'gradient',
        content: {
          fill_color1: target.fill.colorStops[0].color,
          fill_color2: target.fill.colorStops[1].color,
        }
      })
    }
  };

  // TextBox改变宽度按钮控件
  fabric.Textbox.prototype.controls.changeWidth = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    actionHandler: fabric.controlsUtils.changeWidth,
    mouseUpHandler: changeTextboxWidth,
    render: renderIcon(zuoyouImg),
    cornerSize: 26
  });

  // TextBox旋转按钮控件
  // fabric.Textbox.prototype.controls.br = new fabric.Control({
  //   x: 0.5,
  //   y: 0.5,
  //   offsetY: 0,
  //   offsetX: 0,
  //   cursorStyle: 'pointer',
  //   actionName: "rotate",
  //   actionHandler: fabric.controlsUtils.rotationWithSnapping,
  //   cursorStyleHandler: fabric.controlsUtils.scalingEqually,
  //   render: renderIcon(scaleIcon),
  //   cornerSize: 26
  // });

  // TextBox缩放按钮控件
  fabric.Textbox.prototype.controls.br = new fabric.Control({
    x: 0.5,
    y: 0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    actionName: "scaling",
    actionHandler: fabric.controlsUtils.scalingEqually,
    render: renderIcon(scaleImg),
    cornerSize: 26
  });

  // Textbox克隆对象
  fabric.Textbox.prototype.controls.clone = new fabric.Control({
    x: -0.5,
    y: 0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: cloneObject,
    render: renderIcon(cloneImg),
    cornerSize: 26
  })

  // Textbox删除按钮控件-绘制
  fabric.Textbox.prototype.controls.deleteControl = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: deleteObject,
    render: renderIcon(deleteImg),
    cornerSize: 26
  })

  // 文字旋转按钮控件
  fabric.Textbox.prototype.controls.mtr = new fabric.Control({
    x: 0,
    y: -0.5,
    offsetY: -20,
    cursorStyle: 'pointer',
    actionName: "rotate",
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
    render: renderIcon(rotateImg),
    cornerSize: 26
  });

}

// 用户端自定义画布元素控件样式
export function userCustomControlRender() {
  // 其旋转控制点和主体之间一般没有那条控制线，这里我们对它进行隐藏。
  fabric.Object.prototype.controls.mtr.withConnection = false;
  // 将控制线默认的浅蓝色改为#AAB9E3
  fabric.Object.prototype.borderColor = '#AAB9E3';
  // 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
  fabric.Object.prototype.cornerStyle = "circle";
  // 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
  fabric.Object.prototype.padding = 0;
  // 修改控制点的填充色为白色
  fabric.Object.prototype.cornerColor = "white";
  // 修改控制点的大小为10px
  fabric.Object.prototype.cornerSize = 10;
  // 设置控制点不透明，即可以盖住其下的控制线
  fabric.Object.prototype.transparentCorners = false;
  // 修改控制点的边框颜色为`gray`灰色
  fabric.Object.prototype.cornerStrokeColor = "gray";
  // 单独修改旋转控制点距离主体的纵向距离为-20px
  fabric.Object.prototype.controls.mtr.offsetY = -20;

  // 渲染图标
  const renderIcon = icon => {
    return function (ctx, left, top, styleOverride, fabricObject) {
      const size = this.cornerSize;
      ctx.save();
      ctx.translate(left, top);
      ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
      ctx.drawImage(icon, -size / 2, -size / 2, size, size);
      ctx.restore();
    }
  }

  // 创建旋转图片元素==================================================mtr
  let rotateImg = document.createElement('img')
  rotateImg.src = rotateIcon;

  // 旋转按钮控件
  fabric.Object.prototype.controls.mtr = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    actionName: "rotate",
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
    render: renderIcon(rotateImg),
    cornerSize: 26
  });

  // 创建旋转图片元素==================================================br
  let scaleImg = document.createElement('img')
  scaleImg.src = scaleIcon;

  // 缩放按钮控件
  fabric.Object.prototype.controls.br = new fabric.Control({
    x: 0.5,
    y: 0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    actionName: "scaling",
    actionHandler: fabric.controlsUtils.scalingEqually,
    render: renderIcon(scaleImg),
    cornerSize: 26
  });

  // 创建旋转图片元素==================================================br
  let mirrorImg = document.createElement('img')
  mirrorImg.src = mirrorIcon;

  // 镜像控件的事件
  const mirrorObject = (eventData, transform) => {
    const target = transform.target;
    const canvas = target.canvas;
    if (target.flipX) {
      target.flipX = false;
    } else {
      target.flipX = true;
    }
    canvas.requestRenderAll();
  }

  // 镜像按钮控件
  fabric.Object.prototype.controls.mirror = new fabric.Control({
    x: -0.5,
    y: 0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: mirrorObject,
    render: renderIcon(mirrorImg),
    cornerSize: 26
  });

  // TextBox缩放按钮控件
  fabric.Textbox.prototype.controls.br = new fabric.Control({
    x: 0.5,
    y: 0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    actionName: "scaling",
    actionHandler: fabric.controlsUtils.scalingEqually,
    render: renderIcon(scaleImg),
    cornerSize: 26
  });

  // 文字旋转按钮控件
  fabric.Textbox.prototype.controls.mtr = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    actionName: "rotate",
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
    render: renderIcon(rotateImg),
    cornerSize: 26
  });

  // 换字、换图图标加载
  let changImage = document.createElement('img')
  changImage.src = changImageIcon;

  let changText = document.createElement('img')
  changText.src = changTextIcon;

  let changCar = document.createElement('img')
  changCar.src = changCarIcon;

  let changCarText = document.createElement('img')
  changCarText.src = changCarTextIcon;

  // 更换文字
  const handleChangeText = (eventData, transform) => {
    store.dispatch('design/setShowTetxFlag', true);
  }

  // TextBox改变宽度按钮控件
  fabric.Textbox.prototype.controls.changeWidth = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: handleChangeText,
    render: renderIcon(changText),
    cornerSize: 26
  });

  // 换图方法
  const handleChangeImage = async (eventData, transform) => {
    const target = transform.target;
    console.log(target)
    if(target.elType === 'paster' && target.type === 'image'&& target.isXieyinImage){
      Toast({
        message: '此图标不支持更换。',
        position: 'center'
      });
    }
    if (target.elType === 'paster') {
      let type = 'paster';
      await store.dispatch('design/setCurrentSelectionType', '');
      await store.dispatch('design/setCurrentSelectionType', type);
      console.log(33334)
    } else if (target.type === 'group') {
      let type = 'background';
      await store.dispatch('design/setCurrentSelectionType', '');
      await store.dispatch('design/setCurrentSelectionType', type);
    } else if (!target.isXieyinImage) {
      handAccountCanvas.handleChangeImage();
    } else {
      Toast({
        message: '此图标不支持更换。',
        position: 'center'
      });
    }
  }

  // 换车方法
  const handleChangeCarModel = async () => {
    let type = 'background';
    await store.dispatch('design/setCurrentSelectionType', '');
    await store.dispatch('design/setCurrentSelectionType', type);
  }

  // 换车牌方法
  const handleChangeCarText = async () => {
    let type = 'carText';
    await store.dispatch('design/setCurrentSelectionType', '');
    await store.dispatch('design/setCurrentSelectionType', type);
  }

  // 换图
  fabric.Image.prototype.controls.changeWidth = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: 0,
    offsetX: 0,
    cursorStyle: 'pointer',
    mouseUpHandler: handleChangeImage,
    render: renderIcon(changImage),
    cornerSize: 26
  });

  // 换车
  // fabric.Group.prototype.controls.changeWidth = new fabric.Control({
  //   x: 0.5,
  //   y: -0.5,
  //   offsetY: 0,
  //   offsetX: 0,
  //   actionName: 'changeCar',
  //   cursorStyle: 'pointer',
  //   mouseUpHandler: handleChangeCarModel,
  //   render: renderIcon(changCar),
  //   cornerSize: 26
  // });

  // // 换车牌
  // fabric.Group.prototype.controls.mirror = new fabric.Control({
  //   x: -0.5,
  //   y: 0.5,
  //   offsetY: 0,
  //   offsetX: 0,
  //   actionName: 'changeCarText',
  //   cursorStyle: 'pointer',
  //   mouseUpHandler: handleChangeCarText,
  //   render: renderIcon(changCarText),
  //   cornerSize: 26
  // });

}